---
title: 開発とビルド
description: '新しいプロジェクトの作業を始める方法'
i18nReady: true
---
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Astroプロジェクトが用意できたら、いよいよAstroでの開発を始めましょう！🚀

## プロジェクトを編集する

プロジェクトを編集するには、コードエディターでプロジェクトフォルダを開きます。開発モードでdevサーバーを実行すると、コードを編集するたびにサイトの更新内容をリアルタイムで確認できます。

また、[開発環境をカスタマイズ](#開発環境を設定する)することで、TypeScriptの設定やAstro公式エディター拡張機能のインストールなどが行えます。

### Astroのdevサーバーを起動する

Astroには開発用の組み込みサーバーがあり、プロジェクト開発に必要なすべてが揃っています。`astro dev` CLIコマンドを使うことで、ローカルの開発サーバーを起動し、新しいWebサイトの動作を確認できます。

すべてのスターターテンプレートには、`astro dev`を実行するためのスクリプトがあらかじめ設定されています。プロジェクトディレクトリに移動したら、お気に入りのパッケージマネージャーを使用してこのコマンドを実行し、Astroの開発サーバーを起動しましょう。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>

すべてが正常に動作すれば、Astroは[http://localhost:4321/](http://localhost:4321/)でプロジェクトを配信します。ブラウザでそのリンクを開き、新しいサイトを確認しましょう！

### 開発モードで作業する

Astroは`src/`ディレクトリ内のファイル変更をリアルタイムで検出し、サイトのプレビューを自動的に更新します。そのため、開発中にサーバーを再起動する必要はありません。devサーバーが実行中であれば、常に最新のサイトプレビューをブラウザで確認できます。

ブラウザでサイトを表示すると、[Astro devツールバー](/ja/guides/dev-toolbar/)にアクセスできます。これを使えば、[アイランド](/ja/concepts/islands/)の検証やアクセシビリティの問題の特定など、開発作業をサポートしてくれます。

もしdevサーバー起動後にブラウザでプロジェクトが開けない場合は、`dev`コマンドを実行したターミナルに戻り、表示されているメッセージを確認してください。エラーが発生した場合や、プロジェクトが [http://localhost:4321/](http://localhost:4321/)以外のURLで提供されている場合には、そのメッセージに詳細が表示されているはずです。

## サイトのビルドとプレビュー

ビルド時に生成されるサイトのバージョンを確認するには、まずdevサーバーを停止します(<kbd>Ctrl</kbd> + <kbd>C</kbd>)。その後、ターミナルで使用しているパッケージマネージャーに対応するビルドコマンドを実行します:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run build
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm build
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run build
  ```
  </Fragment>
</PackageManagerTabs>

Astroは、デプロイ可能なサイトを別のフォルダ（デフォルトでは`dist/`）にビルドします。ターミナルで進行状況を確認でき、ビルド中にエラーが発生した場合は通知されます。これにより、本番環境へデプロイする前にプロジェクトのビルドエラーを把握できます。また、TypeScriptが`strict`または`strictest`に設定されている場合、`build`スクリプトは型エラーのチェックも実行します。

ビルドが完了したら、ターミナルで適切な`preview`コマンド（例: `npm run preview`）を実行すると、ローカルでビルドされたサイトをブラウザプレビューで確認できます。

このプレビューは、ビルドコマンドを最後に実行した時点のコードに基づいています。これは、Webにデプロイされた際のサイトの見た目を確認するためのものです。ビルド後にコードを変更しても、ビルドコマンドを再実行するまではプレビューに**反映されません**のでご注意ください。

プレビューを終了し、他のターミナルコマンドを実行するには、(<kbd>Ctrl</kbd> + <kbd>C</kbd>)を使用してください。例えば、devサーバーを再起動すれば、開発モードに戻り、編集したコードのライブプレビューがリアルタイムで確認できます。

<ReadMore>Astro CLIと、ビルド中に使用するターミナルコマンドについての詳細は、[Astro CLIリファレンス](/ja/reference/cli-reference/)をご覧ください。</ReadMore>

:::tip 
コードを追加・変更しすぎる前に、[新しいサイトをすぐにデプロイする](/ja/guides/deploy/)ことも検討しましょう。これにより、最小限の動作するバージョンを公開でき、後でデプロイ時に発生するトラブルシューティングの時間や労力を節約できます。
:::

## 次のステップ

成功です!Astroでの開発準備が整いました!🥳

次におすすめする作業をいくつか紹介します。どの順番で読んでも問題ありません。また、ドキュメントから一旦離れてAstroプロジェクトのコードベースで自由に作業し、困った時や質問がある時に戻ってきても大丈夫です。

### 開発環境を設定する

以下のガイドを参考に、開発体験を自分好みに設定してみましょう。

<CardGrid>
  <LinkCard
    title="エディターのセットアップ"
    description="コードエディターをカスタマイズして、Astro開発を快適にし、新しい機能を活用しましょう。"
    href="/ja/editor-setup/"
  />
  <LinkCard
    title="Devツールバー"
    description="Devツールバーの便利な機能を学びましょう。"
    href="/ja/guides/dev-toolbar/"
  />
  <LinkCard
    title="TypeScriptの設定"
    description="型チェックやIntelliSenseなどのオプションを設定しましょう。"
    href="/ja/guides/typescript/"
  />
</CardGrid>

### Astroの機能を学びましょう

<CardGrid>
  <LinkCard
    title="コードベースを理解する"
    description="プロジェクト構造ガイドでAstroのファイル構造について学びましょう。"
    href="/ja/basics/project-structure/"
  />
  <LinkCard
    title="コンテンツコレクションを作成する"
    description="フロントマッターによる検証や自動型安全性を活用して、サイトにコンテンツを追加しましょう。"
    href="/ja/guides/content-collections/"
  />
    <LinkCard
    title="ビュー遷移を追加する"
    description="シームレスなページ遷移やアニメーションを作成しましょう。"
    href="/ja/guides/view-transitions/"
  />
  <LinkCard
    title="アイランドについて学ぶ"
    description="Astroのアイランドアーキテクチャについて詳しく学びましょう。"
    href="/ja/concepts/islands/"
  />
</CardGrid>

### 入門チュートリアルを試してみる

[入門チュートリアル](/ja/tutorial/0-introduction/)では、空白ページから完全に機能するAstroブログを構築する方法を学べます。

このチュートリアルでは、Astroの基本（ページ、レイアウト、コンポーネント、ルーティング、アイランドなど）を順を追って学習できます。さらに、Web開発が初めての方のために、必要なアプリケーションのインストール、GitHubアカウントの作成、サイトのデプロイ手順を学べる、オプションの初心者向け学習ユニットも用意されています。